<template>
  <van-sticky>
    <van-search v-model="keyword" show-action placeholder="请输入搜索关键词" @search="handleSearch">
      <template #action>
        <div @click="handleSearch">搜索</div>
      </template>
    </van-search>
    <div style="background-color: #fff;">
      <van-tabs v-model:active="activeTab">
        <van-tab title="待办" name="mytask,unhandle"></van-tab>
        <van-tab title="已办" name="mytask,handle"></van-tab>
        <van-tab title="待发" name="mysend,unhandle"></van-tab>
        <van-tab title="已发" name="mysend,handle"></van-tab>
      </van-tabs>
    </div>

  </van-sticky>

  <div class="L-base-list">
    <van-empty v-if="loading===false && list.length===0" description="没有数据" />
    <!-- 骨架屏 -->
    <div v-if="loading">
      <van-skeleton title :row="3" v-for="item in 5" :key="item" style="margin-bottom:30px" />
    </div>

    <!-- 列表 -->
    <van-list v-else style="padding-top:10px" v-model:loading="loading" :finished="finished" :finished-text="list.length>0 ? '没有更多了':''" @load="onLoad">
      <div v-if="list.length>0 && activeTab==='mytask,unhandle'" class="L-operation-row">
        <!-- <div class="L-operation-row"> -->
        <div>
          &nbsp;
          <template v-if="operable">
            <van-button @click="checkAll" round color="#258cf7" size="mini" style="margin-right:5px;width: 50px;">全选</van-button>
            <van-button round color="#67C23A" size="mini" style="margin-right:5px;width: 50px;" @click="showOptionDialog('agree')">同意</van-button>
            <van-button round color="#E6A23C" size="mini" style="margin-right:5px;width: 50px;" @click="showOptionDialog('sendback')">退回</van-button>
            <van-button round color="#F56C6C" size="mini" style="width: 50px;" @click="handleBatchRead">阅读</van-button>
          </template>

        </div>
        <div class="L-flex-row" style="align-items: center;">
          <van-switch v-model="operable" size="14px" style="margin-right:10px" /> <span class="L-small-text">批量操作</span>
        </div>

      </div>
      <van-checkbox-group v-model="selectArr" ref="checkboxGroup">
        <van-row class="base-item" type="flex" align="center" v-for="(item,index) in list" :key="index" @click="toCard(item)">
          <van-col v-if="operable && activeTab==='mytask,unhandle'" :span="2"><van-checkbox :name="item.idflow"></van-checkbox></van-col>
          <van-col :span="operable && activeTab==='mytask,unhandle' ? 22 : 24">
            <span v-html="item.title"></span>
            <van-tag v-if="item.procestype === '知会操作'" style=" margin-left: 10px;border:1px solid #f8dfbe" color="#fdf6ed" text-color="#e5a147">知会</van-tag>
          </van-col>
        </van-row>
      </van-checkbox-group>
    </van-list>

  </div>

  <div class="L-bottom-space"></div>

  <van-popup v-model:show="showOption" round :style="{width:'80%',paddingTop:'10px'}">
    <div class="L-text-align-center L-text">审批意见</div>
    <van-cell-group inset>
      <van-field v-model="optionText" rows="5" autosize type="textarea" maxlength="50" placeholder="请输入审批意见" show-word-limit />
    </van-cell-group>
    <div style="width: 90%;margin:10px auto">
      <van-button round type="primary" style="width: 100%;" @click="handleBatch">提交</van-button>
    </div>
  </van-popup>

  <Tabbar />
</template>

<script setup lang="ts">
import {
  closeToast,
  showLoadingToast,
  showConfirmDialog,
  showToast,
} from "vant";
import Tabbar from "@/components/common/Tabbar.vue";


import { onMounted, ref, watch, onUnmounted } from "vue";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();

import { apiConfigurable } from "@/request/api/api";

const keyword = ref("");
const activeTab = ref("mytask,unhandle");

const showOption = ref(false);
const optionText = ref("");
const selectArr = ref([]);
const operable = ref(false);
const checkboxGroup = ref(null);

const checkAll = () => {
  checkboxGroup.value.toggleAll(true);
};

const list = ref([]);
const startline = ref(1);
const pagecount = ref(20); //每页条数
const loading = ref(false); //是否加载中
const finished = ref(false); //列表是否加载完成

watch(activeTab, (value) => {
  operable.value = false;
  selectArr.value = [];
  initCondition();
  onLoad();
});

function handleSearch() {
  initCondition();
  onLoad();
}

//初始化查询条件
function initCondition() {
  startline.value = 1;
  finished.value = false;
  list.value = [];
}

function onLoad() {
  const activeArr = activeTab.value.split(",");
  let params = {
    startline: startline.value,
    pagecount: pagecount.value,
    actioncode: activeArr[1],
    actiontype: activeArr[0],
    condition: keyword.value,
  };

  showLoadingToast({
    message: "加载中...",
    forbidClick: true,
    duration: 0,
  });

  loading.value = true;
  apiConfigurable("flowclmx.list.do", params).then((res) => {
    if (res.code === 0) {
      if (res.data?.jsondata?.approvallist.length < pagecount.value) {
        finished.value = true;
      }
      list.value = [...list.value, ...res.data?.jsondata?.approvallist];
      startline.value = list.value.length + 1;
      closeToast();
      loading.value = false;
    }
  });
}

const currentOperate = ref("");
function showOptionDialog(operate: string) {
  if (selectArr.value.length === 0) {
    showToast("请选择数据");
    return;
  }
  showOption.value = true;
  currentOperate.value = operate;
  console.log(operate);
}

//批量操作
function handleBatch() {
  if (optionText.value === "") {
    showToast("请填写审核意见");
    return;
  }
  const url =
    currentOperate.value === "agree"
      ? "flowclmx.agree.do"
      : "flowclmx.batsendback.do";

  const data = {
    batchoperation: selectArr.value.join(";"),
    option: currentOperate.value,
  };

  showLoadingToast({
    message: "加载中...",
    forbidClick: true,
    duration: 0,
  });

  apiConfigurable(url, data).then((res) => {
    if (res.code === 0) {
      showToast("操作成功");
      showOption.value = false;
      optionText.value = "";
      operable.value = false;
      selectArr.value = [];
      setTimeout(() => {
        initCondition();
        onLoad();
      }, 1000);
    }
  });
}

//批量阅读
function handleBatchRead() {
  if (selectArr.value.length === 0) {
    showToast("请选择数据");
    return;
  }
  const data = {
    batchoperation: selectArr.value.join(";"),
  };
  showLoadingToast({
    message: "加载中...",
    forbidClick: true,
    duration: 0,
  });
  const url = "flowclmx.read.do";

  apiConfigurable(url, data).then((res) => {
    if (res.code === 0) {
      showToast("操作成功");
      showOption.value = false;
      optionText.value = "";
      operable.value = false;
      selectArr.value = [];
      setTimeout(() => {
        initCondition();
        onLoad();
      }, 1000);
    }
  });
}

interface flowItemIf {
  billcode: string;
  billtype: string;
  id: string;
  idflow: string;
  idobject: string;
  operationtime: string;
}

function toCard(item: flowItemIf) {
  const { idobject, id: idbill, idflow } = item;
  const actiontype = activeTab.value.split(",")[0];
  const actioncode = activeTab.value.split(",")[1];

  router.push({
    path: "/flowCard",
    query: {
      idobject,
      idbill,
      idflow,
      actiontype,
      actioncode,
    },
  });
}
</script>

<style scoped>
.L-operation-row {
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0px auto;
  padding: 10px 15px;
  background: #f0f2f5;
  color: #258cf7;
  font-size: 14px;
}
.L-batch-btn {
  border: 1px solid #258cf7;
  padding: 3px 5px;
  border-radius: 6px;
  font-size: 12px;
  margin-right: 15px;
}
</style>